/*
 * @Author: your name
 * @Date: 2021-01-12 16:28:24
 * @LastEditTime: 2021-01-14 16:54:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \carlist\src\pages\Official\index.js
 */
import React, { Component } from 'react';
import {connect} from "react-redux"
import { bindActionCreators } from "redux";
import MyLoading from "../../components/Loading";
import Dialogs from "../../components/Dialogs";
import CarItem from "../../components/Caritem";
import OfficialList from "../../components/OfficialList"
import * as carAction  from "../../store/action/cars"
class Official extends Component {
    state={
        flags:false,
        curIndex:0
    }
    openFn=()=>{
        this.setState({
            flags:true
        })
    }
    componentDidMount(){
        this.props.getBrandList()
    }
    clickFn=(ind)=>{
        this.setState({
            curIndex:ind
        })
    }
    render() {
        let {brandList,makeList}  =  this.props;
        let {curIndex,flags} = this.state  
        return (
            <div className="official">
                 <MyLoading myclass={'main'} ind={curIndex}>
                     <div className="cont">
                         {
                             brandList.map((item,i)=>{
                                 return (
                                     <div className="item" key={item.id}>
                                         <p>
                                             {item.FirstSpell}
                                         </p>
                                         <OfficialList list={item.children} open={this.openFn}></OfficialList>
                                     </div>
                                 )
                             })
                         }
                     </div>
                 </MyLoading>

                 {
                     <ul className="rightSaid">
                         <li className={curIndex===0?'active':''} onClick={()=>this.clickFn(0)}>#</li>
                         {
                             brandList.map((item,i)=>{
                                  return(
                                      <li key={item.id} className={(i+1)===curIndex?'active':''} onClick={
                                          ()=>this.clickFn(i+1)
                                      }>
                                          {item.FirstSpell}
                                      </li>
                                  )
                             })
                         }
                     </ul>
                 }
                 {
                   flags?<Dialogs>
                       <MyLoading ind={curIndex} myclass={'Dialogs-main'}>
                           <div className="Dialog-con">
                               {
                                   makeList.length&&makeList.map(v=>{
                                       return(
                                           <div className="dialog-item" key={v.GroupId}>
                                               <p>{v.GroupName}</p>
                                               <CarItem list={v.GroupList}></CarItem>
                                           </div>
                                       )
                                   })
                               }
                           </div>
                       </MyLoading>
                   </Dialogs>:null  
                 }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        ...state.cars
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    //bindActionCreators
    //将action贺dispatch组合---生成mapDispatchToProps所需要的内容;
    //一种简写mapDispatchToProps的方式;
    return bindActionCreators(carAction,dispatch)
}

export default connect(mapStateToProps,mapDispatchToProps)(Official)